<template>
  <div class="login-box">
    <div class="header">
      <van-nav-bar title="登录" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="content">
      <!-- Field 是基于 Cell 实现的，可以使用 CellGroup 作为容器来提供外边框。 -->
      <van-cell-group :border="false">
        <van-field v-model="value1" placeholder="手机号/账户名/邮箱" />
        <van-field v-model="value2" placeholder="密码" />
      </van-cell-group>
      <van-button
        round
        type="info"
        color="linear-gradient(to right, #ff6034, #ee0a24)"
        @click="login"
        >登录</van-button
      >
      <!-- 跳转至注册 -->
      <span class="go-reg"><router-link to="/reg">手机快速注册</router-link></span
      >
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "HeaderVue",
  data() {
    return {
      value1: "",
      value2: "",
    };
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    login() {
      if (!this.value1 || !this.value2) {
        alert("不能为空");
      } else {
        axios({
          method: "post",
          url: "http://121.89.205.189:3001/api/user/login",
          data: {
            loginname: this.value1,
            password: this.value2,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            localStorage.setItem("token", res.data.data.token);
            localStorage.setItem("userid", res.data.data.userid);
            this.$router.push('/my')
            console.log(res.data.data.token);
            console.log(res.data.data.userid);
          }
        });
      }
    },
  },
};
</script>

<style scoped>
.login-box {
  width: 100%;
}
.content {
  margin: 3rem 1.5rem;
}
.van-button {
  margin: 1rem;
  width: 90%;
  /* margin: 1.25rem auto; */
}
.go-reg {
  float: right;
}
</style>